<template>
    <page-view class="preview-img-page">
        <div class="img-box" @click="hidePreImg">
            <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="(item,index) in imgURLList" :key="index">
                    <img v-lazy="baseURL+item" alt="" class="index-swiper-img" />
                </swiper-slide>
            </swiper>
            <div class="swiper-pagination" slot="pagination"></div>
        </div>
    </page-view>
</template>
<script>
    import {
        Swiper,
        SwiperSlide
    } from "vue-awesome-swiper";
    import "swiper/swiper-bundle.min.css";
    import SwiperCore, {
        Pagination
    } from "swiper";
    SwiperCore.use([ Pagination]);
    import {mapActions} from "vuex";
    import {mapState} from "vuex"
    export default {
        name: "PageviewImg",
        components: {
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                swiperOptions: {
                    pagination: {
                        el: ".swiper-pagination",
                        // 点击点可以跳转图片
                        clickable: true
                    }
                }
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper;
            },
            ...mapState(["imgURLList"])
        },
        methods:{
            ...mapActions(["preImgShowOrHide"]),
            hidePreImg(){
                this.preImgShowOrHide();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .preview-img-page {
        position: absolute;
        top: 0;
        z-index: 999;
        @include flexbox(row, center, center);
        background-color: rgba(0,0,0,0.7);
        .img-box{
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
</style>